<template>
    <div id="app">
      <el-backtop class="back-to-top" :bottom="650" :right="10">
        <div
          style="{
          height: 100%;
          width: 100%;
          text-align:center;
        }"
        class="back-to-top-content"
        >
        <i class="el-icon-caret-top"></i>
        </div>
      </el-backtop>
      <!-- 所有页面都需要的导航 -->
      <div>
        <topNavBar></topNavBar>
      </div>
      <!-- 页面跳转展示部分 -->
      <router-view></router-view>
      <!-- 页面底部 -->
      <appFooter></appFooter>
      <!-- live2d展示部分 -->
      <!-- <Live2d></Live2d> -->
      <myLive2d></myLive2d>
      <!--全局的音乐播放器-->
      <!-- <div class="neteasy-warp">
        <neteasyMusicPlayer :musicSrc="musicSrc"></neteasyMusicPlayer>
      </div> -->
        
  </div>
</template>
<script>
import topNavBar from '@/components/top-navbar';
import neteasyMusicPlayer from "@/components/neteasyMusicPlayer";
import appFooter from "@/components/appFooter";
// import Live2d from '@/components/Live2d';
import myLive2d from '@/components/myLive2d';
import {request} from '@/network/request.js';
import '@/static/js/mouseClickEffect.js';
export default {
  name: 'app',
  components: {
    topNavBar,
    neteasyMusicPlayer,
    appFooter,
    myLive2d
    // Live2d
  },
  data(){
    return {
      // musicSrc: "",
      appIsReady:false,
    }
  },
  created(){
    // this.musicSrc =
    //   "//music.163.com/outchain/player?type=0&id=3092080017&auto=0&height=90";
      //页面启动的时候看用户是否记住了登录如果存在cookies则用此ID用于登录
      if(this.$cookies.isKey("currentUserId")){
        request({
          url:"/user/autoLogin/"+this.$cookies.get("currentUserId")
        }).then(res=>{
          if(res.data.verifySuccess){
            //下步操作把登录后的用户数据给vuex进行管理
            this.$store.commit({
              type:"setCurrentUser",
              userInfo:res.data.userInfo
            });
            this.$store.commit({
              type:"setIsLogin",
              isLogin:true
            });
            this.$store.commit({
              type:"setToken",
              token:res.data.token
            });
          }
        }).catch(err=>{
          console.log(err);
        })
      }
  }
}
</script>
<style>
.neteasy-warp {
  position: fixed;
  right: 0;
  top: 0;
}
.back-to-top {
  color: #FF69B4 !important;
  transition: all 0.3s;
  width: 50px !important;
  height: 50px !important;
  font-size: 25px !important;
}
.back-to-top:hover {
  background-color: #FF69B4 !important;
  color: #fff !important;
}
</style>
